<template>
    <!--默认布局-->
    <div v-show="!hidden" class="el-form-item" style="margin-bottom: 0;">
      <span :for="name" class="el-form-item__label" :style="leftWidth">{{ label }}</span>
      <div class="el-form-item__content" :style="rightWidth">
        <slot :input="input"></slot>
        <div class="clearfix"></div>
        <div v-show="isNotValid" class="sea-form-error"> {{ message }}</div>
      </div>
    </div>
</template>

<script>
/* eslint-disable */
import Layers from "@/lang/layers";

/**
 * FormLayout
 *
 * 业务上，包含： “页面布局” 和 “数据有效性检验” 两个关键功能；
 * 界面上，包含每一个 form-item 的具体绘制方式。
 *
 * 代码上看不到 FormGroup 和 FormLayout 存在彼此调用的关系，二者之间确实是紧耦合关系，
 * FormGroup 通过 provide 向 FormLayout 传递参数。
 */
export default {
    name: "SmartFormLayout"
    // 通过 inject，直接获取 FormGroup 的参数配置
    , inject: ['fast_form']
    , props: {
        // 字段名，允许多个组件合并，放到同一个布局单元中
        name: {type: String}
        // 中文名，未定义则使用字段名
        , label: {type: String, default: undefined}
        // 是否隐藏
        , hidden: {type: Boolean, default: false}
        // 是否必填
        , require: {type: Boolean, default: false}
        // 数据验证规则
        , rules: {type: Array, default: undefined}
        // 整个组件占用的栈格大小
        , span: {type: Number, default: 24}
        // 布局风格
        , theme: {type: String, default: 'default'}
        // 布局参数：栈格分布
        // , col: {type: Array, default: () => [8, 16]}
        // 布局参数：标签宽度
        , labelWidth: {type: [Number, String], default: undefined}
    }, data() {
        return {
            // 当前界面使用的对象模型
            input: {}

            // 参数校验：是否有效
            , valid: undefined
            // 参数校验：异常信息
            , message: ''

            // 左布局宽度
            , leftWidth: 'width: 100px;'
            // 右布局宽度
            , rightWidth: 'margin-left: 100px;'
        }
    }, watch: {
        hidden: {
            handler: function (val) {
                this.input.hidden = val;
            }
        }
        , require: {
            handler: function (val) {
                this.input.require = val;
            }
        }
    }, computed: {
        /**
         * 是否显示错误提示
         */
        isNotValid: function () {
            return this.valid === false;
        }
    }, created: function () {
        let input = this.fast_form.getFormInput(this.name);
        Layers.notBlank(input, 'form input is undefined:' + this.name);

        // 数据拷贝
        input.col = this.col;
        input.span = this.span;

        input.name = this.name;
        input.label = this.label;
        input.require = this.require;

        input.rules = this.rules;

        input.hidden = this.hidden;

        // 注册容器，数据变化会直接触发 onChange 事件
        input.setLayout(this);
        this.input = input;

        if(input.theme === 'inline'){
            // 水平布局
            this.leftWidth = '';
            this.rightWidth = '';
        } else  if (Layers.isNotBlank(this.labelWidth)) {
            this.leftWidth = 'width: ' + this.labelWidth + 'px;';
            this.rightWidth = 'margin-left: ' + this.labelWidth + 'px;';
        }
    }, methods: {

        /**
         * 启动数据校验
         *
         * 首次校验是特殊的，需要通知到当前组件，触发界面变化
         */
        onStartupValidator: function (){
            let input = this.input;
            this.valid = input.valid;
            this.message = input.message;
        },

        /**
         * 数据受控函数，数据发生变化的时候，会通知到当前组件
         *
         * @see FastForm
         * @param val
         */
        onChangeValue(val) {
            let input = this.input;
            // 验证表单有效性
            input.checkValidity();
            // 获取结果，触发 Vue 界面联动
            this.valid = input.valid;

            this.message = input.message;
        }
    }
}
</script>
